import { fmtInt, fmtMw } from "@/lib/format";
import { OG_CONTENT_TYPE, OG_SIZE, renderOg } from "@/lib/og-template";
import { getMetro } from "./data";

export const alt = "Data center market — DataCenterIndex";
export const size = OG_SIZE;
export const contentType = OG_CONTENT_TYPE;
export const revalidate = 3600;

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const r = await getMetro(slug);
  if (!r.ok) return renderOg({ eyebrow: "Market", title: "Data center market", subtitle: "DataCenterIndex — facilities, capacity and pipeline by metro market." });
  const m = r.data;
  const pipe = m.constructionMw === null && m.plannedMw === null ? null : (m.constructionMw ?? 0) + (m.plannedMw ?? 0);
  return renderOg({
    eyebrow: "Market",
    title: `Data centers in ${m.name}`,
    subtitle: [m.countryName ?? m.countryIso2, m.regionName && m.regionName !== m.name ? m.regionName : null].filter(Boolean).join(" · "),
    stats: [
      { label: "Facilities", value: fmtInt(m.facilityCount) },
      { label: "Known MW", value: m.knownMw === null ? "—" : fmtMw(m.knownMw) },
      { label: "Pipeline", value: pipe === null ? "—" : `≈ ${fmtMw(pipe)}` },
      { label: "Operators", value: fmtInt(m.operatorCount) },
    ],
  });
}